<template>
	<view class="classLayout pageBg main ">
		<view class="nav-title">
			<view class="title" >梗图集</view>
		</view>

		<view class="list" v-for="(item,index) in classList" :key="item.id" @click="goToPage(item)">
			<view class="img">
				<image :src="item.picList.url" mode="widthFix" />
			</view>
			<view class="end">
				<view class="end-title">
					{{item.day}}
				</view>
				<view class="end-text">
					<view class="text-left">{{item.theme}}</view>
					<view class="text-right" style="color: #999;">浏览量 {{item.picCount}}</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import {
		apiGetList
	} from '@/api/api_test.js'


	const classList = ref([]);

	const getList = async () => {
		const res = await apiGetList();
		console.log(res.data);
		classList.value = res.data
	}
	const goToPage = (item)=>{
		uni.navigateTo({
			url:`/pages/picture/pictureDeatil?id=${item._id}`
		})
	}
	


	getList();
</script>

<style lang="scss" scoped>
	.main {
		padding: 30rpx;
	}

	.classify {
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15rpx;
	}

	.nav-title {
		padding-top: 26px;
		width: 100vw;

		.title {
			margin: 40rpx 0;
			font-size: 22px;
			font-weight: 700;
			color: $text-font-color-1;
		}
	}

	.list {
		margin: 40rpx 0 80rpx 0;
		over: hidden;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
		.img {
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
			}
		}

		.end {
			padding: 20rpx;
			width: 100%;

			.end-title {
				font-weight: bold;
				font-size: 20px;
				padding-bottom: 30rpx;
			}

			.end-text {
				display: flex;
				justify-content: space-between;
				font-size: 25rpx;
			}
		}

	}
</style>